<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>生命周期旧</title>
  </head>

  <body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      class Count extends React.Component {
        constructor(props) {
          console.log("Count-constructor");
          super(props);
          this.state = { count: 0 };
        }

        add = () => {
          this.setState({ count: this.state.count + 1 });
        };

        death = () => {
          ReactDOM.unmountComponentAtNode(document.getElementById("test"));
        };

        //强制更新
        force = () => {
          this.forceUpdate();
        };

        //组件将要挂载
        componentWillMount() {
          console.log("组件将要挂载-componentWillMount");
        }

        //组件挂载完毕
        componentDidMount() {
          console.log("组件挂载完毕-componentDidMount");
        }

        //组件是否更新
        shouldComponentUpdate() {
          console.log("组件是否更新-shouldComponentUpdate");
          return true;
        }

        //组件将要更新
        componentWillUpdate() {
          console.log("组件将要更新-componentWillUpdate");
        }

        //组件更新完毕
        componentDidUpdate() {
          console.log("组件更新完毕-componentDidUpdate");
        }

        //组件将要卸载
        componentWillUnmount() {
          console.log("组件将要卸载-componentWillUnmount");
        }

        render() {
          console.log("Count-render");
          return (
            <div>
              <h2>当前求和为: {this.state.count}</h2>
              <button onClick={this.add}>加一</button>
              <button onClick={this.death}>卸载</button>
              <button onClick={this.force}>强制更新</button>
            </div>
          );
        }
      }

      class A extends React.Component {

        state = {carName :'奔驰'}


        changeCar = ()=>{
          this.setState({carName:'奥迪'})
        }

        render() {
          return(
          <div>
          <div>A组件</div>
          <button onClick={this.changeCar}>换车</button>
          <B carName={this.state.carName}/>
          </div>
        )
        }
      }

      class B extends React.Component {

        //将要接受一个新的props
        componentWillReceiveProps(prosp){
          console.log("接受新的props-componentWillReceiveProps",prosp)
        }

        //组件是否更新
        shouldComponentUpdate() {
          console.log("组件是否更新-shouldComponentUpdate");
          return true;
        }

        //组件将要更新
        componentWillUpdate() {
          console.log("组件将要更新-componentWillUpdate");
        }

        //组件更新完毕
        componentDidUpdate() {
          console.log("组件更新完毕-componentDidUpdate");
        }

        render() {
          console.log('B-render')
          return( 
            <div>我是B组件,接受到的车是:{this.props.carName}</div>
            )
        }
      }

      ReactDOM.render(<A />, document.getElementById("test"));
    </script>
  </body>
</html>
